<template>
    <div class="app-container">
        <div class="container-module">
            <div class="title-module">充值记录</div>
            <div class="search-module">
                <el-form :inline="true" class="search-form" size="small" ref="searchForm" :model="searchForm">
                    <div class="flex-between">
                        <div>
                            <el-form-item label="用户昵称" class="search-form-item" prop="activity_name">
                                <el-input clearable placeholder="请输入用户昵称" v-model="searchForm.activity_name">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="充值方式" class="search-form-item" prop="status">
                                <el-select clearable v-model="searchForm.status" placeholder="请选择状态">
                                    <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="充值渠道" class="search-form-item" prop="status">
                                <el-select clearable v-model="searchForm.status" placeholder="请选择状态">
                                    <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="充值时间" class="search-form-item" prop="time">
                                <el-date-picker clearable v-model="searchForm.time" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                        <div class="button-box">
                            <el-button @click="getListWay" type="primary" icon="el-icon-search"
                                class="inquire-box marginBottom-10">查询</el-button>
                            <el-button icon="el-icon-refresh-left" class="reset-box"
                                @click="resetForm('searchForm')">重置</el-button>
                        </div>
                    </div>
                </el-form>
            </div>
            <el-divider></el-divider>
            <div class="table-module">
                <div class="table-top flex-end">
                    <div class="flex button-box">
                        <el-button class="reset-box marginRight-10" icon="el-icon-download"
                            style="height: 30px">下载</el-button>
                        <el-dropdown trigger="click" :hide-on-click="false">
                            <span class="el-dropdown-link">
                                <el-button icon="el-icon-s-operation" style="height: 30px"></el-button>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                                        tableTheadOptions[fruit].label
                                    }}</el-checkbox>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
                <el-row>
                    <el-col>
                        <el-table v-loading="loading" highlight-current-row :data="dataList" :header-cell-style="{
                            'background-color': '#f3f8fe',
                            color: '#606266',
                            height: '50px',
                        }" style="width: 100%">
                            <el-table-column v-for="fruit in tableThead" :key="fruit"
                                :label="tableTheadOptions[fruit].label" :min-width="tableTheadOptions[fruit].width
                                    ? tableTheadOptions[fruit].width
                                    : '80'
                                    " align="center">
                                <template slot-scope="scope">
                                    <div v-if="fruit == 'status'">
                                        <el-tag v-if="scope.row.status == -1" type="danger">已过期</el-tag>
                                        <el-tag v-if="scope.row.status == 1" type="success">已开启</el-tag>
                                        <el-tag v-if="scope.row.status == 3" type="success">进行中</el-tag>
                                        <el-tag v-if="scope.row.status == 2" type="warning">已关闭</el-tag>
                                    </div>
                                    <div v-else>
                                        {{ scope.row[fruit] }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" prop="address" label="操作" align="center" width="80px">
                                <template slot-scope="scope">
                                    <el-button style="margin: 5px" type="text" size="mini" @click="viewDetail(scope.row)">
                                        查看
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                    <el-col style="text-align: right">
                        <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page"
                            :limit.sync="searchForm.count" @pagination="getListWay" />
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 详情抽屉 -->
        <detail ref="detail" v-if="ifShowDetail" :detailTitle="detailTitle" />
    </div>
</template>
<script>
import {
    getAwardList,
    delAward,
    SaveAwardStatus,
    getAwardTaskList,
    SaveAwardTask,
    delAwardTask,
} from "@/api/activity/index";
import {
    getgroupList,
    getTagCategoryAll,
    getgradeList,
    getRegionList,
} from "@/api/user/index";
import detail from "./detail";
// import detail from "./detailcopy";
const tableTheadOption = {
    id: {
        label: "用户id",
        field: "id",
    },
    award_name: {
        label: "用户昵称",
        field: "award_name",
        width: "150",
    },
    user_lottery_num: {
        label: "充值金额",
        field: "user_lottery_num",
    },
    user_days_lottery_num: {
        label: "充值渠道",
        field: "user_days_lottery_num",
    },
    group_name: {
        label: "充值方式",
        field: "group_name",
    },
    created_at: {
        label: "充值时间",
        field: "created_at",
        width: "140",
    },
    created_at: {
        label: "审核时间",
        field: "created_at",
        width: "140",
    },
    status: {
        label: "审核状态",
        field: "status",
    },
};
const allTableThead = [
    "id",
    "award_name",
    "user_lottery_num",
    "user_days_lottery_num",
    "group_name",
    "created_at",
    'status',
];
const defaultTableThead = [
    "id",
    "award_name",
    "user_lottery_num",
    "user_days_lottery_num",
    "group_name",
    "created_at",
    'status',
];
export default {
    watch: {
        checkboxTableThead(valArr) {
            this.tableThead = this.allTableThead.filter(
                (i) => valArr.indexOf(i) >= 0
            );
            this.tableKey = this.tableKey + 1;
        },
    },
    components: {
        detail,
    },
    data() {
        return {
            detailTitle: "", //抽屉标题
            // 动态显示表头默认表头
            tableTheadOptions: tableTheadOption,
            allTableThead: allTableThead,
            tableThead: defaultTableThead, // 默认表头
            checkboxTableThead: defaultTableThead, // 默认表头值
            tableKey: 1, // 为了保证table 每次都会重渲
            loading: true, // 列表页面加载
            groupingList: [],
            TagCategoryAll: [],
            gradeList: [],
            regionList: [],
            status: [
                { name: "已过期", id: -1 },
                { name: "已开启", id: 1 },
                { name: "进行中", id: 3 },
                { name: "已关闭", id: 2 },
            ],
            searchForm: {
                award_name: "", // 抽奖活动名称
                user_area: [], //生效区域
                user_group: [], //用户群组
                status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
                time: [],
                page: 1,
                count: 10,
            },
            dataList: [],
            total: 0,
            ifShowDetail: false, //是否打开详情抽屉
        };
    },
    created() {
        const p1 = new Promise((resolve, reject) => {
            getgroupList().then((res) => {
                if (res.code !== 200 || res.status !== 1) {
                    this.$messages.error(res.msg);
                    reject();
                    return;
                }
                this.groupingList = res.data.list;
                resolve();
            });
        });
        const p2 = new Promise((resolve, reject) => {
            getTagCategoryAll().then((res) => {
                if (res.code !== 200 || res.status !== 1) {
                    this.$messages.error(res.msg);
                    reject();
                    return;
                }
                this.TagCategoryAll = res.data;
                resolve();
            });
        });
        const p3 = new Promise((resolve, reject) => {
            getgradeList().then((res) => {
                if (res.code !== 200 || res.status !== 1) {
                    this.$messages.error(res.msg);
                    reject();
                    return;
                }
                this.gradeList = res.data.list;
                resolve();
            });
        });
        const p4 = new Promise((resolve, reject) => {
            getRegionList({ level: 2 }).then((res) => {
                if (res.code !== 200 || res.status !== 1) {
                    this.$messages.error(res.msg);
                    reject();
                    return;
                }
                this.regionList = res.data;
                resolve();
            });
        });
        Promise.all([p1, p2, p3, p4])
            .then(() => {
                this.getListWay();
            })
            .catch(() => {
                this.loading = false;
            });
    },
    methods: {
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getListWay();
        },
        viewDetail(row) {
            this.detailTitle = "充值明细";
            this.ifShowDetail = true;
            // this.$nextTick(() => {
            //     this.$refs.detail.getAwardInfoWay(row);
            // });
            console.log();
        },
        //打开抽屉
        addDetail(title) {
            this.detailTitle = title;
            this.ifShowDetail = true;
        },
        //关闭抽屉
        closedetail() {
            this.ifShowDetail = false;
            this.getListWay();
        },
        getListWay() {
            this.loading = true;
            let searchObj = {
                award_name: this.searchForm.award_name,
                status: this.searchForm.status,
                page: this.searchForm.page,
                count: this.searchForm.count,
                user_area: this.searchForm.user_area.toString(),
                user_group: this.searchForm.user_group.toString(),
                start_time: this.searchForm[0] ? this.searchForm[0] : "",
                end_time: this.searchForm[1] ? this.searchForm[1] : "",
            };
            getAwardList(searchObj).then((res) => {
                this.loading = false;
                if (res.code !== 200 || res.status !== 1) {
                    this.loading = false;
                    return this.$messages.error(res.msg);
                }
                this.dataList = res.data.list;
                this.total = res.data.total;
            });
        },
        resetting() {
            this.searchForm = {
                award_name: "", // 抽奖活动名称
                status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
                page: 1,
                count: 10,
            };
            this.getListWay();
        },
        saveWay(url) {
            this.$router.push(url);
        },
        editCoupon(row) {
            this.$router.push("/activity/raffle/save?id=" + row.id);
        },
        deleteCoupon(row) {
            this.loading = true;
            delAward({ id: row.id })
                .then((res) => {
                    if (res.code !== 200 || res.status !== 1) {
                        this.loading = false;
                        return this.$messages.error(res.msg);
                    }
                    this.$messages.success("删除成功");
                    this.getListWay();
                })
                .catch((err) => {
                    this.loading = false;
                    this.$messages.error(err.msg);
                });
        },
        // 修改状态
        saveStatus(row, num) {
            var obj = {
                id: row.id,
                status: num,
            };
            this.loading = true;
            SaveAwardStatus(obj)
                .then((res) => {
                    if (res.code !== 200 || res.status !== 1) {
                        this.loading = false;
                        return this.$messages.error(res.msg);
                    }
                    this.$messages.success("操作成功");
                    this.getListWay();
                })
                .catch((err) => {
                    this.$messages.error(err.msg);
                    this.loading = false;
                });
        },
    },
};
</script>
<style lang="scss">
.search-form-item {
    padding-bottom: 10px;
    padding-right: 20px;

    .el-form-item__label {
        font-size: 12px;
        font-weight: 500;
        // width:96px;
    }

    .el-input {
        width: 180px;
    }
}
</style>
<style lang="scss" scoped>
.marginBottom-10 {
    margin-bottom: 10px;
}

.marginRight-10 {
    margin-right: 10px;
}

.flex {
    display: flex;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.button-box {
    font-size: 14px;
    text-align: right;
    font-size: 12px;

    .inquire-box {
        background: #1890ff;
        color: #ffffff;
    }

    .reset-box {
        background: #eeeeee;
    }
}

.app-container {
    background: #f3f5f7;

    .container-module {
        background: #fff;
        padding: 20px;
        border-radius: 5px;

        .title-module {
            font-size: 18px;
        }

        .search-module {
            padding-top: 20px;
            display: block;
        }

        .table-module {
            .table-top {
                margin-bottom: 20px;
            }

            .table-num {
                margin-left: 5px;
                background: #f0f0f0;
                width: 35px;
                border-radius: 5px;
            }
        }
    }
}
</style>